<template>
  <view class="distribution-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="left" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <view class="center">
        <view class="tab-group">
          <view 
            class="tab-item" 
            :class="{ active: activeTab === '我的客户' }"
            @tap="switchTab('我的客户')"
          >我的客户</view>
          <view 
            class="tab-item" 
            :class="{ active: activeTab === '全城客户' }"
            @tap="switchTab('全城客户')"
          >全城客户</view>
        </view>
      </view>
      <view class="right"></view>
    </view>

    <!-- 地图容器 -->
    <view class="map-container">
      <map
        id="customerMap"
        class="map"
        :latitude="mapCenter.latitude"
        :longitude="mapCenter.longitude"
        :markers="markers"
        :scale="12"
        :show-location="true"
      ></map>

      <!-- 右下角控制按钮组 -->
      <view class="control-buttons">
        <view class="control-button" @tap="toggleServiceRange">
          <image src="/static/icons/range.png" mode="aspectFit"></image>
        </view>
        <view class="control-button" @tap="locateToCurrentPosition">
          <text class="iconfont icon-location"></text>
        </view>
      </view>

      <!-- 底部指示器 -->
      <view class="density-indicator">
        <text class="indicator-label">客户少</text>
        <view class="indicator-bar"></view>
        <text class="indicator-label">客户多</text>
      </view>
    </view>

    <!-- 服务范围设置弹窗 -->
    <uni-popup ref="serviceRangePopup" type="bottom">
      <view class="service-range-popup">
        <view class="popup-header">
          <text class="title">服务范围</text>
          <text class="close" @tap="closeServiceRangePopup">关闭</text>
        </view>
        <view class="range-content">
          <slider 
            :value="serviceRange" 
            :min="1" 
            :max="20" 
            :step="1" 
            @change="onRangeChange"
            show-value
          />
          <text class="range-text">{{ serviceRange }}公里</text>
        </view>
        <button class="confirm-button" @tap="confirmServiceRange">确认</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      activeTab: '我的客户',
      mapCenter: {
        latitude: 39.9042,
        longitude: 116.4074
      },
      markers: [],
      serviceRange: 5,
      heatmapData: []
    }
  },

  onLoad() {
    this.initializeMap()
    this.loadCustomerDistribution()
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    switchTab(tab) {
      this.activeTab = tab
      this.loadCustomerDistribution()
    },

    async initializeMap() {
      // 获取当前位置
      try {
        const location = await this.getCurrentLocation()
        this.mapCenter = location
      } catch (error) {
        uni.showToast({
          title: '获取位置失败',
          icon: 'none'
        })
      }
    },

    getCurrentLocation() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          success: res => {
            resolve({
              latitude: res.latitude,
              longitude: res.longitude
            })
          },
          fail: err => {
            reject(err)
          }
        })
      })
    },

    async loadCustomerDistribution() {
      uni.showLoading({
        title: '加载中...'
      })

      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/member/customer-distribution`,
          method: 'GET',
          data: {
            type: this.activeTab === '我的客户' ? 'my' : 'all'
          },
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          this.heatmapData = result.data.data
          this.updateHeatmap()
        }
      } catch (err) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    updateHeatmap() {
      // 更新地图上的热力图显示
      // 注：实际实现需要根据地图SDK的具体API
    },

    toggleServiceRange() {
      this.$refs.serviceRangePopup.open()
    },

    closeServiceRangePopup() {
      this.$refs.serviceRangePopup.close()
    },

    onRangeChange(e) {
      this.serviceRange = e.detail.value
    },

    async confirmServiceRange() {
      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/member/service-range`,
          method: 'POST',
          data: {
            range: this.serviceRange
          },
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          uni.showToast({
            title: '设置成功',
            icon: 'success'
          })
          this.closeServiceRangePopup()
        }
      } catch (err) {
        uni.showToast({
          title: '设置失败',
          icon: 'none'
        })
      }
    },

    locateToCurrentPosition() {
      this.getCurrentLocation().then(location => {
        this.mapCenter = location
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.distribution-container {
  height: 100vh;
  background: #FFFFFF;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .center {
      flex: 1;
      display: flex;
      justify-content: center;

      .tab-group {
        display: flex;
        background: #F5F5F5;
        border-radius: 32rpx;
        padding: 4rpx;

        .tab-item {
          padding: 12rpx 32rpx;
          font-size: 28rpx;
          color: #666666;
          border-radius: 28rpx;

          &.active {
            background: #2B85E4;
            color: #FFFFFF;
          }
        }
      }
    }
    
    .right {
      width: 88rpx;
    }
  }

  .map-container {
    height: 100%;
    position: relative;

    .map {
      width: 100%;
      height: 100%;
    }

    .control-buttons {
      position: absolute;
      right: 30rpx;
      bottom: 200rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;

      .control-button {
        width: 80rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

        image {
          width: 40rpx;
          height: 40rpx;
        }

        .iconfont {
          font-size: 40rpx;
          color: #2B85E4;
        }
      }
    }

    .density-indicator {
      position: absolute;
      left: 30rpx;
      bottom: 60rpx;
      background: #FFFFFF;
      border-radius: 32rpx;
      padding: 20rpx 30rpx;
      display: flex;
      align-items: center;
      gap: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

      .indicator-label {
        font-size: 24rpx;
        color: #666666;
      }

      .indicator-bar {
        width: 200rpx;
        height: 8rpx;
        background: linear-gradient(90deg, #FFE5E5 0%, #FF4B4B 100%);
        border-radius: 4rpx;
      }
    }
  }

  .service-range-popup {
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 0 0;
    padding: 30rpx;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
      }

      .close {
        font-size: 28rpx;
        color: #999999;
      }
    }

    .range-content {
      margin-bottom: 30rpx;

      .range-text {
        font-size: 28rpx;
        color: #666666;
        text-align: center;
        margin-top: 20rpx;
      }
    }

    .confirm-button {
      width: 100%;
      height: 88rpx;
      background: #2B85E4;
      color: #FFFFFF;
      border-radius: 44rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style> 